<template>
	<view>
		<uni-easyinput v-model="inputValue" :inputBorder="inputBorder" :placeholder="placeholder"
			:primaryColor="primaryColor" :clearable="clearable" @focus="onFocus" @clear="onClear" />
		<uni-popup ref="popup" type="bottom" :isMaskClick="false">
			<view class="buttons">
				<!-- <text class="button cancel" @click="cancel">取消</text> -->
				<text class="button confirm" @click="confirm">确定</text>
			</view>
			<view class="content">
				<uni-list class="list">
					<uni-list-item :title="item.text" @click="onClick(index)" clickable :key="index"
						v-for="(item,index) in tempList">
						<template v-slot:footer v-if="item.selected">
							<uni-icons :type="iconType" size="auto" :color="iconColor"></uni-icons>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	/**
	 * DataChecklist 数据选择器 - 多选
	 * @description 通过数据渲染的弹层选择组件，依赖 uni-list 组件
	 * 
	 * @property {Array} value 选中的 value 集合，如果 selectedIndexs 设置了值，组件初始化后会同步更新
	 * @property {Array} localdata 本地数据 ，格式 [{text:'',value:''}]
	 * @property {Array} selectedIndexs 默认选中 ，格式 [0,1]
	 * @property {Boolean} clearable 是否可以清空已选项
	 * @property {Boolean} disabled 是否禁用
	 * @property {Boolean} inputBorder 是否显示input输入框的边框（默认true）
	 * @property {String} placeholder 输入框的提示文字
	 * @property {String} primaryColor 主题色
	 * @property {String} keyName 选项对象中，需要展示的属性键名（默认 'text' ）
	 * 
	 * @event {Function} confirm  点击确定按钮触发，会更新 value ，并返回 选中的索引集合
	 * @event {Function} clear 点击清除按钮触发
	 * @event {Function} click 内容项被点击时触发，返回示例： {index: 0, item: {text: '选项1', value: '11'}, selected: true}
	 */

	export default {
		name: "wgh-select-multiple",
		data() {
			return {
				inputValue: '',
				tempSelectedIndexs: [],
				tempSelectedValues: [],
				tempList: [],
			};
		},
		model: {
			prop: 'value', // 此处的value为父组件v-model绑定数据
			event: 'input' // 派发事件，事件名只能是input，否则无法生效
		},
		props: {
			value: {
				type: Array,
				default () {
					return []
				}
			},
			localdata: {
				type: Array,
				default () {
					return []
				}
			},
			selectedIndexs: {
				type: Array,
				default () {
					return []
				}
			},
			clearable: {
				type: Boolean,
				default: true
			},
			inputBorder: {
				type: Boolean,
				default: true
			},
			placeholder: {
				type: String,
				default: '请选择'
			},
			primaryColor: {
				type: String,
				default: '#007aff'
			},
			iconType: {
				type: String,
				default: 'checkmarkempty'
			},
			iconColor: {
				type: String,
				default: '#000'
			},
			keyValue: {
				type: String,
				default: 'value'
			},
			keyName: {
				type: String,
				default: 'text'
			},
			joinFlag: {
				type: String,
				default: ','
			}
		},
		watch: {
			localdata: {
				immediate: true,
				handler(val, old) {
					if (Array.isArray(val) && old !== val) {
						this.init()
					}
				}
			},
			selectedIndexs: {
				immediate: true,
				handler(newValue, oldValue) {
					this.init()
				}
			}
		},
		methods: {
			init() {
				this.tempList = [];
				this.localdata.forEach((item, index) => {
					this.tempList.push({
						value: item[this.keyValue],
						text: item[this.keyName],
						selected: this.selectedIndexs.indexOf(index) === -1 ? false : true
					});
				})
				this.tempListChange()

				// 更新 model
				this.$emit('input', this.tempSelectedValues)
			},
			onFocus(e) {
				uni.hideKeyboard();
				this.$refs.popup.open('bottom')
				this.$emit('focus')
			},
			onClear() {
				this.tempList.map(item => {
					item.selected = false
				})
				this.$emit('clear')
			},
			confirm() {
				// 更新 model
				this.$emit('input', this.tempSelectedValues)
				// 触发 confirm
				this.$emit('confirm', this.tempSelectedIndexs)
				// 关闭组件
				this.$refs.popup.close();
			},
			cancel() {
				this.$refs.popup.close();
				this.$emit('cancel');
			},
			onClick(index) {
				this.tempList[index].selected = !this.tempList[index].selected

				this.$emit('click', {
					index: index,
					item: this.localdata[index],
					selected: this.tempList[index].selected,
				})

				this.tempListChange()
			},
			tempListChange() {
				let selectedTexts = [];
				let selectedValues = [];
				this.tempSelectedIndexs = [];
				this.tempList.forEach((item, index) => {
					if (item.selected) {
						selectedTexts.push(item.text);
						selectedValues.push(item.value);
						this.tempSelectedIndexs.push(index);
					}
				})
				this.inputValue = selectedTexts.join(this.joinFlag);
				this.tempSelectedValues = selectedValues;
			}
		}
	}
</script>

<style scoped lang="scss">
	.buttons {
		background-color: #fff;
		display: flex;
		justify-content: flex-end;

		.button {
			padding: 15px 15px;
			cursor: pointer;
		}

		.cancel {
			color: #909193;
		}

		.confirm {
			color: $uni-color-primary;
		}
	}

	.content {
		border: 0px solid blue;
		background-color: #fff;
		padding-bottom: 20px;

		.list {
			height: 70vh;
			border: 0px solid red;
			overflow-y: scroll;
		}
	}
</style>